<style type="text/less" lang="less" scoped>
    @import url('./index.less');
</style>

<template>
    <el-container>
        <el-aside width="261px" class="content-left-list">
            <div class="ps-panel nav-left-menu" style="height: 100%;">
                <div class="ps-panel-head">
                    <i class="ps-panel-head-icon iconfont icon-guanxiwajue"></i>
                    <span class="ps-panel-head-title">分类</span>
                </div>

                <div class="ps-panel-body">
                    <el-tree :data="labels" node-key="id" default-expand-all :expand-on-click-node="false" :props="{label: 'label_name'}" @node-click="treeNodeClick"></el-tree>
                    <!--<el-menu :default-active="nodeTypes[0].node" class="el-menu-vertical">-->
                        <!--<el-menu-item v-for="item of nodeTypes" :index="item.node" :key="item.node" @click="init(item.node)">{{item.node_name}}</el-menu-item>-->
                    <!--</el-menu>-->
                </div>
            </div>
        </el-aside>
        <el-main class="content-main">
            <div class="ps-panel nav-left-menu" style="height: 100%;">
                <div class="ps-panel-head">
                    <i class="ps-panel-head-icon iconfont icon-list"></i>
                    <span class="ps-panel-head-title">列表</span>
                    <span class="query">
                        <el-form inline :model="queryForm" size="mini">
                            <el-form-item label="名称：">
                                <el-input v-model="queryForm['名称']" placeholder="名称"></el-input>
                            </el-form-item>
                            <el-form-item label="别名：">
                                <el-input v-model="queryForm['别名']" placeholder="别名"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="query">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </span>
                </div>

                <div class="ps-panel-body">
                    <el-table :data="nodeData" size="small" highlight-current-row stripe style="width: 100%; margin-bottom: 10px;">
                        <el-table-column prop="编号" label="编号" width="80"></el-table-column>
                        <el-table-column prop="名称" label="名称" width="200"></el-table-column>
                        <el-table-column prop="国家" label="国家" width="100"></el-table-column>
                        <el-table-column prop="别名" label="别名" class-name="inlinetxt">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <div style="max-width: 500px;">
                                        <el-tag size="medium" v-for="(item, i) of scope.row['别名']" :key="i" style="margin-bottom: 10px;">{{ item }}</el-tag>
                                    </div>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium" v-for="(item, i) of scope.row['别名']" :key="i">{{ item }}</el-tag>
                                    </div>
                                </el-popover>

                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                                v-if='paginations.total > 0'
                                :page-size="paginations.pageSize"
                                :layout="paginations.layout"
                                :total="paginations.total"
                                :current-page='paginations.pageIndex'
                                @current-change='jump'
                                style="text-align: right;">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-main>

        <el-dialog title="编辑别名" :visible.sync="dialogVisible" width="450px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称：">{{form['名称']}}</el-form-item>
                <el-form-item label="别名：" prop="别名" :rules="{required: true, message: '不能为空'}">
                    <el-input type="textarea" v-model="form['别名']" rows="8"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
    export default {
        name: "alias",
        data: function() {
            return {
                dialogVisible: false,
                queryForm: {
                    '名称': '',
                    '别名': ''
                },
                form: {
                    '编号': '',
                    '名称': '',
                    '别名': ''
                },
                labels: [],
                currNodeType: '',
                paginations: {
                    pageIndex: 1,   // 当前位于哪页
                    pageSize: 20,   // 页显示多少条
                    total: 0,       // 总数
                    layout: "total, prev, pager, next"   // 翻页属性
                },
                nodeData: []
            };
        },
        methods:  {
            init(nodeType) {
                this.currNodeType = nodeType;
                this.jump(1);
            },
            query() {
                this.jump(1);
            },
            jump(i) {
                if (i === undefined) {
                    i = this.paginations.pageIndex;
                } else {
                    this.paginations.pageIndex = i;
                }

                this.$store.dispatch('ajax', {url: 'api/alias/queryNodesName', method: 'get', data: {nodeLabel: this.currNodeType, name: this.queryForm['名称'], alias: this.queryForm['别名'], page: i, number: this.paginations.pageSize},
                    succeed:
                        (res) => {
                        this.nodeData = res.rows;
                        this.paginations.total = res.total;
                    }
                });
            },
            edit(row) {
                this.form['编号'] = row['编号'];
                this.form['名称'] = row['名称'];
                this.form['别名'] = row['别名'].join('\n');
                this.dialogVisible = true;
            },
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const aliasArr = this.form['别名'].split('\n');
                        let alias = '';

                        for (const item of aliasArr) {
                            const name = item.replace(/(^\s*)|(\s*$)/g, '');
                            if (name) {
                                alias += '#~#' + name;
                            }
                        }
                        alias = alias.substr(3);

                        this.$store.dispatch('ajax', {url: 'api/alias/saveNodesName', method: 'put', data: {id: this.form['编号'], alias: alias, nodeLabel: this.currNodeType}, succeed: () => {
                                this.jump();
                                this.$message.success('保存成功');
                                this.dialogVisible = false;
                            }
                        });
                    }
                });
            },
            treeNodeClick(data) {
                this.init(data.label_name);
            }
        },
        mounted: function () {
            this.$store.dispatch('ajax', {url: 'services/app-zonghe/api/converter/getLabelColumn', method: 'get', succeed: (res) => {
                    this.labels = res.rows;
                }
            });
        }
    }
</script>
